import React from "react";

import '@/assets/css/coupon-info.css'

const Info = () => {

    // 接收跳转参数
    const [searchParams] = React.Router.useSearchParams()

    let [cid, SetCid] = React.useState(searchParams.get('cid') ? searchParams.get('cid') : 0)

    var [receive, SetReceive] = React.useState([]);

    var [coupon, SetCoupon] = React.useState({
        title: '',
        rate: 1,
        stock: 0,
        total: 0,
        createtime_text: '',
        endtime_text: '',
        receive: false,
        thumb_text: '',
    })


    React.useEffect(() => {
        CouponData()
    }, [])

    const ReceiveItem = receive.map((item: any, key) => 
        <React.UI.Swiper.Item key={key}>
            <React.UI.NoticeBar 
                content={`用户${item.business.nickname ? item.business.nickname : '匿名用户'} 于 ${item.createtime_text} 领取了优惠券`} 
                color='info' 
                style={{border: 0}} 
            />
        </React.UI.Swiper.Item>
    )

    const CouponData = async () => {
        var data = {
            id: cid,
            busid: React.Business.id ? React.Business.id : 0
        }

        var result = await React.HTTP.post('/coupon/info', data)

        if (result.code == 0) {
            React.error(result.msg)
            return false
        } else {
            SetCoupon(result.data.coupon)
            SetReceive(result.data.receive)
        }
    }

    const CouponReceive = async () => {
        if(!React.Business.id){
            React.error('请先登录',() => {})
            return false
        }
        var data = {
            cid: cid,
            busid: React.Business.id
        }

        var result = await React.HTTP.post('/coupon/receive',data)

        if(result.code == 0){
            React.error(result.msg,() => {})
            return false
        }else{
            CouponData()
            React.success(result.msg,() => {})
        }
    }


    return (
        <>
            <React.UI.NavBar
                back='返回'
                onBack={() => { React.navigate(-1) }}
            >
                优惠券详情
            </React.UI.NavBar>

            <React.UI.AutoCenter>
                <React.UI.Image src= {coupon.thumb_text} style={{width:'100%'}} fit="fill" />
            </React.UI.AutoCenter>

            <React.UI.Swiper
                loop
                autoplay
                autoplayInterval={1000}
                indicator={() =>false}
                direction='vertical' 
                style={{ '--height': '40px', 'border':'0px' }}
            >
                {ReceiveItem}
            </React.UI.Swiper>

            <div className="coupon_detail">
                <div className="coupon_info">
                    <div className="left">
                        <div className="left_top">
                            <div>
                                <span>{coupon.rate * 10}</span>折
                            </div>
                            <div className="top_info">
                                <div>{coupon.title}</div>
                                <div>COUPON</div>
                            </div>
                        </div>
                        <div className="left_tips">优惠券剩余<span>{coupon.stock}</span>张</div>
                    </div>
                    <div className="receive">
                        {
                            coupon.receive ? 
                            <React.UI.Button disabled size='mini' color='primary'>
                            您已领取
                            </React.UI.Button> : 
                            <React.UI.Button size='mini' color='primary' onClick={CouponReceive}>
                            领取
                            </React.UI.Button>
                        }
                    </div>
                </div>
                <div className="coupon_prompt">
                    <div className="prompt_title">温馨提示：</div>
                    <div><span>•</span>每人限领1张</div>
                    <div><span>•</span>仅限量{coupon.total}张，赶快领取！</div>
                    <div><span>•</span>领取后{coupon.createtime_text}至{coupon.endtime_text}有效</div>
                </div>
            </div>
        </>
    )
}


export default Info;